<div class="lg:w-full mx-auto items-center justify-between">
    <div class="bg-white shadow rounded overflow-hidden dark:bg-black">
        <div class="bg-cover mx-auto w-32 h-32 mt-5 rounded-full" style="background-image: url('{{ .Site.Author.avatar }}')"> </div>
        
        <div class="p-4">
            <p class="text-2xl text-center pb-2">{{ .Site.Author.name }}</p>
            <p class="text-sm text-center text-gray-700 dark:text-gray-300">{{ .Site.Author.bio }}</p>
        </div>
        <div class="flex p-4 border-t text-sm border-gray-300 text-gray-700 dark:text-gray-300">
            <div class="flex-1 border-r border-gray-600">
                <p class="text-center">
                    <span class="font-bold ">
                        {{ len (where .Site.RegularPages "Type" "in" (slice "post" "posts")) }}
                    </span>
                    文章
                </p>
            </div>
            <div class="flex-1 text-center">
                <p class="text-center">
                    <span class="font-bold">
                        {{ if isset .Site.Taxonomies "tags" }}
                            {{ len .Site.Taxonomies.tags }}
                        {{ else }}
                            0
                        {{ end }}
                    </span>
                    标签
                </p>
            </div>
        </div>
        <div class="px-4 pb-4 border-t border-gray-300 dark:text-gray-200">
            <div class="mt-6 pb-16 lg:pb-0 w-4/5 lg:w-full mx-auto flex flex-wrap items-center justify-between text-gray-500">
                {{ with .Site.Social.github }}
                <a href="//github.com/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="GitHub"><i class="my-iconfont icon-social-github"></i></a>
                {{ end }}

                {{ with .Site.Social.jsfiddle }}
                <a href="//jsfiddle.net/user/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="JSFiddle"><i class="my-iconfont icon-jsfiddle"></i></a>
                {{ end }}

                {{ with .Site.Social.codepen }}
                <a href="//codepen.io/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="CodePen"><i class="my-iconfont icon-social-codepen"></i></a>
                {{ end }}

                {{ with .Site.Social.dribbble }}
                <a href="//dribbble.com/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Dribbble"><i class="my-iconfont icon-social-dribbble"></i></a>
                {{ end }}

                {{ with .Site.Social.behance }}
                <a href="//behance.net/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Behance"><i class="my-iconfont icon-social-behance"></i></a>
                {{ end }}

                {{ with .Site.Social.flickr }}
                <a href="//flickr.com/photos/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Flickr"><i class="my-iconfont icon-social-flickr"></i></a>
                {{ end }}

                {{ with .Site.Social.instagram }}
                <a href="//instagram.com/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Instagram"><i class="my-iconfont icon-instagram"></i></a>
                {{ end }}

                {{ with .Site.Social.youtube }}
                <a href="//youtube.com/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="YouTube"><i class="my-iconfont icon-social-youtube"></i></a>
                {{ end }}

                {{ with .Site.Social.vimeo }}
                <a href="//vimeo.com/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Vimeo"><i class="my-iconfont icon-social-vimeo"></i></a>
                {{ end }}

                {{ with .Site.Social.vine }}
                <a href="//vine.co/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Vine"><i class="my-iconfont icon-social-vine"></i></a>
                {{ end }}

                {{ with .Site.Social.medium}}
                <a href="//medium.com/@{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Medium"><i class="my-iconfont icon-medium"></i></a>
                {{ end }}

                {{ with .Site.Social.wordpress }}
                <a href="//{{.}}.wordpress.com" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="WordPress"><i class="my-iconfont icon-social-wordpress"></i></a>
                {{ end }}

                {{ with .Site.Social.tumblr }}
                <a href="//{{.}}.tumblr.com" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Tumblr"><i class="my-iconfont icon-social-tumblr"></i></a>
                {{ end }}

                {{ with .Site.Social.linkedin }}
                <a href="//linkedin.com/in/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="LinkedIn"><i class="my-iconfont icon-social-linkedin"></i></a>
                {{ end }}

                {{ with .Site.Social.slideshare }}
                <a href="//slideshare.com/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="SlideShare"><i class="my-iconfont icon-slideshare"></i></a>
                {{ end }}

                {{ with .Site.Social.stackoverflow }}
                <a href="//stackoverflow.com/users/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Stack Overflow"><i class="my-iconfont icon-stack-overflow"></i></a>
                {{ end }}

                {{ with .Site.Social.reddit }}
                <a href="//reddit.com/user/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Reddit"><i class="my-iconfont icon-reddit"></i></a>
                {{ end }}

                {{ with .Site.Social.pinterest }}
                <a href="//pinterest.com/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Pinterest"><i class="my-iconfont icon-social-pinterest"></i></a>
                {{ end }}

                {{ with .Site.Social.weibo }}
                <a href="//weibo.com/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Weibo"><i class="my-iconfont icon-weibo"></i></a>
                {{ end }}

                {{ with .Site.Social.facebook }}
                <a href="//facebook.com/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Facebook"><i class="my-iconfont icon-social-facebook"></i></a>
                {{ end }}

                {{ with .Site.Social.twitter }}
                <a href="//twitter.com/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Twitter"><i class="my-iconfont icon-social-twitter"></i></a>
                {{ end }}

                {{ with .Site.Social.douban }}
                <a href="//douban.com/people/{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="Douban"><i class="my-iconfont icon-social-douban"></i></a>
                {{ end }}

                {{ with .Site.Social.rss }}
                <a href="{{.}}" class="hover:text-gray-900 dark:hover:text-gray-100 p-1 text-2xl" target="_blank" title="RSS"><i class="my-iconfont icon-feed"></i></a>
                {{ end }}
            </div>
        </div>
    </div>
</div>

{{ partial "posts/popular.html" . }}

{{ if .Site.Params.profileAds }}
    <div class="profile-ads">{{ .Site.Params.profileAds | safeHTML }}</div>
{{ end }}


